<template>
	<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
		<FormItem label="分类名称" prop="title">
			<Input v-model="formValidate.title" placeholder="输入名称"></Input>
		</FormItem>
		<FormItem label="排序" prop="sort">
			<Input v-model="formValidate.sort" placeholder="输入排序"></Input>
		</FormItem>
		<FormItem label="上级分类">
			<Select v-model="formValidate.parent_id" placeholder="选择分类">
				<Option label="无上级分类" :value="0"></Option>
				<Option v-for="(item,index) in parentList" :key="index" :label="item.title" :value="item.id"></Option>
			</Select>
		</FormItem>
		<FormItem label="上传图片">
			<Upload ref="upload" :show-upload-list="false" :format="['jpg','jpeg','png']" :max-size="2048" :on-format-error="handleFormatError"
			 :on-exceeded-size="handleMaxSize" type="drag" :action="upload_qiniu_url" :show-file-list="false" :on-success="handleAvatarSuccess"
			 :data="qiniuData" :before-upload="beforeAvatarUpload" style="display: inline-block;width:58px;">
				<div style="width: 58px;height:58px;line-height: 58px;">
					<Icon type="ios-camera" v-if="!formValidate.cover" size="20"></Icon>
					<img :src="formValidate.cover" alt="" style="width: 100%;height: 100%;">
				</div>
			</Upload>
		</FormItem>


		<FormItem>
			<Button type="primary" @click="handleSubmit('formValidate')">确定</Button>
			<Button @click="handleReset('formValidate')" style="margin-left: 8px">取消</Button>
		</FormItem>
	</Form>
</template>
<script>
	import {
		category,
		categorydetail,
		getToken
	} from "@/api/index.js"
	export default {
		props: {
			contextData: {
				default: {}
			}
		},
		mounted() {
			this.switchchange()
			let res = category({
				page: 1,
				pageSize: 99,
				parent_id: 0
			});
			res.then(res => {
				this.parentList = res.data;
				if (this.contextData && this.contextData.id) {
					this.formValidate = this.contextData
					this.formValidate.parent_id = Number(this.contextData.parent_id)
				}
			});

		},
		data() {
			return {
				qiniuData: {
					key: "",
					token: ""
				},
				upload_qiniu_url: "http://upload-z1.qiniup.com",
				// 七牛云返回储存图片的子域名
				upload_qiniu_addr: "http://qiniu.guoshiying.xyz/",
				parentList: [],
				formValidate: {
					title: '',
					mail: '',
					city: '',
					gender: '',
					interest: [],
					date: '',
					parent_id: 0,
					sort: ''
				},
				ruleValidate: {
					title: [{
						required: true,
						message: '请填写分类名称',
						trigger: 'blur'
					}],
					sort: [{
						required: true,
						message: '请填写分类排序',
						trigger: 'blur'
					}, ],
					parent_id: [{
						required: true,
						message: '请选择分类',
						trigger: 'change'
					}, ],
				}
			}
		},

		methods: {
			switchchange(res) {
				getToken().then(res => {

					if (res.code == 200) {
						this.upload_qiniu_url = res.upload_qiniu_url;
						this.upload_qiniu_addr = res.upload_qiniu_addr;
						this.qiniuData.token = res.uptoken;
					}
				});
			},
			handleError() {
				
			},
			beforeAvatarUpload(file) {
			this.qiniuData.key = file.name;
			},
			handleFormatError(file) {
				this.$Notice.warning({
					title: '类型错误',
					desc: '你上传的 ' + file.name + '类型不对，请选择 jpg or png.'
				});
			},
			handleMaxSize(file) {
				this.$Notice.warning({
					title: '大小错误',
					desc: '你上传的 ' + file.name + '大小不对，请选择 小于2M.'
				});
			},
			handleAvatarSuccess(res, file) {
				this.$set(this.formValidate, "cover", this.upload_qiniu_addr + res.key);
			},
			handleSubmit(name) {
				this.$refs[name].validate((valid) => {
					if (valid) {
						this.$Message.success('Success!');
					} else {
						this.$Message.error('Fail!');
					}
				})
			},
			handleReset(name) {
				this.$emit('on-cancel')
				this.$refs[name].resetFields();
			}
		}
	}
</script>
